<template>
	<transition name="slider">
	<div class="edit-panel">
		<div class="edittool">
			<span class="backlist" @click='backlist()'>&lt;</span>
			<span class="edittitle">{{contentlist.times}}</span>
			<span class="editok" @click='modify'>完成</span>
		</div>
		<textarea class="editcontent" v-model="contentlist.content"></textarea>
	</div>
	</transition>
</template>
<script type="text/javascript">
	export default{
		props: ['list', 'isactive'],
		computed: {
            contentlist() {
                return this.list;
            }
        },
		methods:{
			backlist() {
                this.$emit('change');
            },
            modify() {
                this.$emit('modify', this.contentlist);
            }

		}
	}
</script>
<style type="text/css">
	.edit-panel{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: white;
	}
	.edittool{
		background: #00d1b2;
		color: white;
		font-size: 18px;
		height: 40px;
		line-height: 40px;
	}
	.backlist{
		position: absolute;
		left: 1%;
		font-size: 20px;
		width: 40px;
    	cursor: pointer;
	}
	.edittitle{
		text-align: center;
	}
	.editok{
		position: absolute;
		right: 1%;
		cursor: pointer;
		width: 40px;
	}
	.editcontent{
		position: absolute;
	    top: 2.5rem;
	    left: 0;
	    bottom: 0;
	    padding: 5px 15px;
	    width: 92%;
	    border: 0;
	    outline: none;
	    resize: none;
	    background: #fbfbfb;
	}
</style>